<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<form action="../day10/target.html">


    <div>
        用户名 <input type="text" name="username">
    </div>

    <div>
        <!--
                使用input type为password来创建密码框，密码框中的内容不会以明文显示，避免密码被偷看

                默认情况下，表单中的数据会通过url地址来发送，url地址中?后的内容被称为查询字符串（query string）
                    ?username=admin&password=123123
                    查询字符串是一个一个的名值对结构，一个数据名对应一个值，多个名值对之间使用&隔开，
                        数据发送给服务器后，服务器可以根据数据名获取对应的值

        -->
        <!--        密码 <input type="password" name="password">-->
    </div>

    <div>
        <!--
            单选框
                - 使用input type=radio来创建一个单选框
                    单选框是通过name属性来分组的，相同name属性的为一组
                    像这种选择框，不需要用户填写内容，还必须为表单项指定value，value最终会成为提交给服务器的值
        -->
        性别：
        <input type="radio" name="gender" value="male"> 男
        <input type="radio" name="gender" value="female"> 女
    </div>

    <div>
        <!--
            多选框
                - 使用input type=checkbox来创建多选框
        -->
        爱好：
        <input type="checkbox" name="hobby" value="ppq"> 乒乓球
        <input type="checkbox" name="hobby" value="lq"> 篮球
        <input type="checkbox" name="hobby" value="ymq"> 羽毛球
        <input type="checkbox" name="hobby" value="zq"> 足球

    </div>

    <div>
        <!--
            下拉列表
                - 使用select来创建下拉列表
                - 添加 multiple 属性后可以将下拉列表设置为多选的下拉列表
        -->
        你最喜欢的编程语言：
        <select name="language" >
            <option value="js">JavaScript</option>
            <option>Java</option>
            <option>Python</option>
        </select>

    </div>

    <div>
        <input type="submit" value="登录">
    </div>

</form>


</body>
</html>